<template>
	<view class="cell-box">
		<view v-if="required" class="required">*</view>
		<view class="cell-title">{{ title }}</view>
		<view class="cell-content">
			<!-- 地区 -->
			<uni-data-picker :readonly="disabled" v-if="mode === 'region'" :localdata="regionItems" popup-title="请选择城市"
				:clear-icon="false" @nodeclick="regionclick"></uni-data-picker>

			<!-- 单选 -->
			<picker :disabled="disabled" v-else-if="mode === 'selector'" @change="bindPickerChange" range-key="label"
				:value="selectorIndex" :range="selectorItem" class="w-full">
				<view class="uni-input" v-if="selectorIndex != -1">
					{{ selectorItem[selectorIndex] && selectorItem[selectorIndex].label }}
				</view>
				<view v-else class="placeholder">请选择{{ title }}</view>
			</picker>

			<!-- 时间 -->
			<picker v-else-if="mode === 'time'" :disabled="disabled" mode="time" :value="myvalue"
				@change="bindTimeChange" class="w-full">
				<view v-if="myvalue" class="uni-input">{{ myvalue }}</view>
				<view v-else class="placeholder">请选择时间</view>
			</picker>

			<!-- 日期 -->
			<picker v-else-if="mode === 'date'" :disabled="disabled" mode="date" :value="myvalue" start="1980-01-01"
				end="2980-01-01" @change="bindDateChange" class="w-full">
				<view v-if="myvalue" class="uni-input">{{ myvalue }}</view>
				<view v-else class="placeholder">请选择日期</view>
			</picker>

			<!-- 输入框 -->
			<input v-else-if="mode === 'input'" :disabled="disabled" class="uni-input" v-model="myvalue"
				:maxlength="maxlength" :placeholder="'请输入' + title" />
			<!-- 输入框 -->
			<input v-else-if="mode === 'number'" :disabled="disabled" type="number" class="uni-input" v-model="myvalue"
				:maxlength="maxlength" :placeholder="'请输入' + title" />

			<!-- 跳转 -->
			<template v-else-if="mode === 'jump'">
				<view @click="handleJump()" class="jump-btn" :class="{ isAuth: myvalue ? 1 : 0 }">

					{{ jumpBtn[myvalue ? 1 : 0] }}&nbsp;>
					<view class="jumpReIn" v-if="jumpReIn && myvalue" @click="handleJump(true)">{{ jumpReIn }}></view>
				</view>
			</template>
			<!-- 短信验证码 -->
			<template v-else-if="mode === 'pwd'" class="pwd">
				<input type="number" maxlength="6" class="uni-input" v-model="myvalue" />
				<text>|</text>
				<view @click="handlePwd" class="get-code" :class="{ pwdText: pwdText }"> {{ pwdText || '获取短信密码' }}
				</view>
			</template>

			<!-- 图形验证码 -->
			<template v-else-if="mode === 'imgcode'" class="pwd">
				<input maxlength="4" class="uni-input" v-model="myvalue" />
				<image style="margin-right: 40rpx;height: 32px;flex-shrink: 0;width: 150rpx;"
					src="../static/img/txyzm.png" alt="">
			</template>

			<!-- 单选组 radios = [{label: '是', value: '1'}, {label: '否', value: '2'}]-->
			<template v-else-if="mode === 'radios'" class="pwd">
				<radio-group v-model="myvalue" @change="radioChange">
					<radio v-for="(item, index) in radios" :key="index" :value="item.value" :checked="index === 0"
						style="margin-right: 40rpx;">{{ item.label }}</radio>
				</radio-group>
			</template>
			<template v-else-if="mode === 'slot'">
				<text class="tag">{{ tag }}</text>
				<view @click="handleJump" class="jump-btn" :class="{ isAuth: myvalue ? 1 : 0 }">{{ jumpBtn[myvalue ? 1 : 0]
				}}&nbsp;>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		regionItems
	} from "./data.js"
	import UniDataPicker from "uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue"
	export default {
		name: "cell",
		components: {
			UniDataPicker
		},
		props: {
			value: {
				default: () => {
					return ''
				}
			},
			title: {
				default: '标题'
			},
			required: {
				default: () => {
					return false
				}
			},
			disabled: {
				default: () => {
					return false
				}
			},
			mode: {
				default: 'input'
			},
			maxlength: {
				default: ''
			},
			jumpReIn: {
				default: ''
			},
			selectorItem: {
				default: () => {
					return []
				}
			},
			jumpBtn: {
				type: Array,
				default: () => {
					return ['待认证', '已认证']
				}
			},
			jumpUrl: {
				type: String,
				default: '/'
			},
			radios: {
				default: () => {
					return []
				}
			},
			tag: {}
		},
		data() {
			return {
				myvalue: '',
				selectorIndex: -1,
				pwdText: '',
				regionItems,
				myvalue: this.value,
				array: []
			};
		},

		watch: {
			value: function(e) {
				if (e != this.myvalue) this.myvalue = e
			},
			myvalue: function(e) {
				this.$emit('input', e)
			},
		},
		methods: {
			jumpReInFn() {
				this.$emit('rein')
			},
			bindPickerChange(e) {
				this.selectorIndex = e.detail.value
				if (this.selectorIndex > -1 && this.selectorItem[this.selectorIndex]) this.myvalue = this.selectorItem[this
					.selectorIndex].value
			},

			regionclick(node) {
				this.myvalue = node.value
			},
			bindTimeChange(e) {
				this.myvalue = e.detail.value
			},
			bindDateChange(e) {
				this.myvalue = e.detail.value
			},
			handleJump(re) {
				if (this.myvalue && !re) {
					uni.showToast({
						icon: "none",
						title: `您${this.jumpBtn[1]}!`,
					})
					return
				}
				uni.navigateTo({
					url: this.jumpUrl
				})
			},
			radioChange(value) {
				this.myvalue = value.detail.value
			},
			handlePwd() {
				if (this.pwdText) {
					return
				}
				this.pwdText = `60s后可重新发送`
				this.handlePwdOut()
			},
			handlePwdOut() {
				if (!this._timer && this._timer != 0) this._timer = 60
				if (this._timer == 0) {
					this._timer = null
					this.pwdText = ''
					return
				}
				this.pwdText = this._timer + `s后可重新发送`
				this._timer--
				setTimeout(() => {
					this.handlePwdOut()
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.placeholder {
		color: #d1d1d1;
		font-size: 24rpx;
	}

	.uni-input-placeholder {
		font-size: 24rpx;
	}

	.uni-input-placeholder.input-placeholder {
		height: 100%;
	}

	.cell-box {
		display: flex;
		align-items: center;
		border-bottom: 2rpx rgb(244, 244, 245) solid;
		min-height: 58rpx;
		position: relative;

		.required {
			color: red;
			position: absolute;
			left: 5rpx;
			font-size: 20rpx;
			height: 20rpx;
			width: 22rpx;
			top: calc(50% - 14rpx);
		}

		.get-code {
			width: 100%;
			color: #006AE9;
			text-align: center;
			white-space: nowrap;
			margin-left: 20rpx;

			&.pwdText {
				color: gray;
			}
		}
	}

	.cell {
		&-title {
			width: 250rpx;
			padding: 0 10rpx 6rpx 20rpx;
			flex-shrink: 0;
			font-size: 24rpx;
		}

		&-content {
			font-size: 24rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.uni-input-input {
				font-size: 24rpx;
			}

			.uni-input {
				width: 100%;
			}
		}
	}



	.jump-btn {
		width: 100%;
		padding-right: 30rpx;
		text-align: right;
		display: flex;
		align-items: center;
		padding-left: 40%;
		color: rgb(16, 142, 233);

		&.isAuth {
			color: rgb(255, 0, 0);
		}
	}

	.jumpReIn {
		margin-left: auto;
		padding-top: 4rpx;
		color: #006AE9;
		font-size: 20rpx;
		margin-right: 40rpx;
	}

	.tag {
		white-space: nowrap;
		color: red;
	}
</style>